<template>
  <Card :bordered="false">
    <div style="margin-bottom: 15px" class="flex-row-center-space">
      <Button @click="back">返回</Button>
      <Button :type="'primary'" @click="handleAdd">添加</Button>
    </div>

    <BasicTable @register="registerTable">
      <template #mapQuotationListId> {{ keyValueBizMetaAttrText }} </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '编辑',
              onClick: handleEdit.bind(null, record),
            },
          ]"
        />
      </template>
    </BasicTable>

    <DetailModal @register="registerModal" @success="handleSuccess" />
  </Card>
</template>

<script setup lang="ts">
  import { useRoute } from 'vue-router';
  import mcApi from 'mc-c2b2m-operator-api';
  import { useModal } from '@/components/Modal';
  import { Card, Button } from 'ant-design-vue';
  import { computed, onMounted, ref, unref } from 'vue';
  import { BasicTable, TableAction, useTable } from '@/components/Table';
  import { detailTableColumn } from '@/views/spu/components/mapQuotationList/data';
  import DetailModal from '@/views/spu/components/mapQuotationList/detailModal.vue';

  const { SpuModule } = mcApi;
  const { QuotationApi } = SpuModule;

  const route = useRoute();
  // 所属映射计价表对象
  const mapQuotationList = ref<any>({});

  const [registerTable, { reload }] = useTable({
    striped: false,
    bordered: false,
    canResize: false,
    immediate: false,
    useSearchForm: false,
    showIndexColumn: false,
    showTableSetting: false,
    columns: detailTableColumn,
    api: QuotationApi.getMapQuotationListItemPage,
    beforeFetch: (arg) => {
      arg.mapQuotationListId = mapQuotationList.value.id;
    },
    actionColumn: {
      width: 150,
      title: '操作',
      fixed: 'right',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });

  const [registerModal, { openModal, closeModal }] = useModal();

  onMounted(() => {
    const query = route.query;
    mapQuotationList.value = JSON.parse(<string>query?.record || '{}');
    reload();
  });

  const keyValueBizMetaAttrText = computed(() => {
    const { keyBizMetaAttrList } = mapQuotationList.value;
    return keyBizMetaAttrList?.map?.((item: any) => item.cnName)?.join?.('，');
  });

  function back() {
    window.history.back();
  }
  function handleAdd() {
    openModal(true, {
      mapQuotationList: unref(mapQuotationList),
    });
  }
  function handleEdit(record: any) {
    openModal(true, {
      record,
      ifUpdate: true,
      mapQuotationList: unref(mapQuotationList),
    });
  }
  function handleSuccess() {
    closeModal();
    reload();
  }
</script>

<style scoped lang="scss">
  :deep(.ant-table-thead > tr > th) {
    background: #fff;
  }
</style>
